<template>
  <!-- <el-table
    :data="reset"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="TargetNum"
      label="产品编码">
    </el-table-column>
    <el-table-column
      prop="Name"
      label="产品名称">
    </el-table-column>
    <el-table-column
      prop="address"
      label="商品数量">
    </el-table-column>
    <el-table-column
      prop="date"
      label="照片数">
    </el-table-column>
    <el-table-column
      prop="name"
      label="有效面积（m²）"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="打印类型">
    </el-table-column>
    <el-table-column
      prop="name"
      label="相纸类型">
    </el-table-column>
    <el-table-column
      prop="address"
      label="适用排产规则名称"
      width="180">
    </el-table-column>
  </el-table> -->

<div>
  <el-table
    :data="reset"
    @selection-change="change"


    :header-cell-style="{background:'#eef1f6',color:'#909399'}"
    border

    style="width: 100%">
    <el-table-column
      type="selection"
      align="center"
      width="45">
    </el-table-column>
    <el-table-column
      label="序号"
      align="center"
      type="index"
      :index="indexMethod"
      width="50">
    </el-table-column>
    <el-table-column
      width="40"
      type="expand">
      <template slot-scope="scope">
          <el-table
            :header-cell-style="{background:'#eef1f6',color:'#909399'}"
            :data="scope.row.OrderProducts"
            border
            highlight-current-row

            style="width:90%">
            <!-- <el-table-column
            prop="OrderProductId"
            label="序号"
            width="50">
            </el-table-column> -->
            <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
            </el-table-column>
            <el-table-column
            prop="ProductCode"
            label="产品编码"
            align="center"
            width="100">
            </el-table-column>

            <el-table-column
            prop="ProductName"
            label="产品名称"
            @cell-click="handleCurrentChange"
            align="center"
            width="200">
            <template slot-scope="scope">
              <span @click="lookphoto(scope.row)" style="color:#0095FF;cursor:pointer">{{scope.row.ProductName}}</span>
              <!-- <span @cell-click="handleCurrentChange(scope.row)" style="color:#0095FF;cursor:pointer">{{scope.row.ProductName}}</span> -->
            </template>
            </el-table-column>

            <el-table-column
            prop="PhotoNum"
            label="照片张数"
            align="center"
            width="80">
            </el-table-column>
            <el-table-column
            prop="ProductSize"
            align="center"
            label="规格"
            width="100">
            </el-table-column>
            <el-table-column
            prop="ProductArea"
            align="center"
            label="总面积"
            width="100">
            </el-table-column>
            <el-table-column
            prop="OrderProductCode"
            label="SN条形码"
            align="center"
            width="140">
            </el-table-column>
            <el-table-column
            prop="CurTechName"
            label="下一道工序"
            align="center">
            </el-table-column>
            <!-- <el-table-column
            prop="ProductionPlanNo"
            :show-overflow-tooltip="true"
            label="所属排程"
            align="center">
            </el-table-column> -->
            <el-table-column
            prop="CurTechUpdateTime"
            :show-overflow-tooltip="true"
            label="更新时间"
            align="center">
            </el-table-column>
            <!-- <el-table-column
            prop="address"
            label="产品金额"
            align="center"
            width="100">
            </el-table-column> -->
        </el-table>
      </template>
    </el-table-column>
    <!-- <el-table-column
      prop="OrderbagId"
      label="订单"
      width="50"> -->
    <!-- <template slot-scope="scope">
        <span>
            <i class="el-icon-arrow-right" v-show="!scope.row.check" @click="scope.row.check=true" style="margin-right:10px"></i>
            <i class="el-icon-arrow-down" v-show="scope.row.check" @click="scope.row.check=false" style="margin-right:10px"></i>
            {{scope.row.date}}
        </span>
    </template> -->
    <!-- </el-table-column> -->
    <el-table-column
      prop="NetOrderId"
      align="center"
      label="平台销售订单"
      width="140">
    </el-table-column>
    <el-table-column
      prop="Name"
      label="客户名称"
      sortable
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="OrderTypeFormat"
      align="center"
      label="订单类型"
      width="100">
    </el-table-column>
    <el-table-column
      prop="OrderFee"
      align="center"
      sortable
      width="110"
      label="订单金额">
    </el-table-column>
    <el-table-column
      prop="PaymentTypeFormat"
      align="center"
      label="支付方式">
    </el-table-column>
    <el-table-column
      prop="ShippingCompanyName"
      align="center"
      label="配送方式">
    </el-table-column>
    <el-table-column
      prop="PaymentTime"
      align="center"
      sortable
      :show-overflow-tooltip="true"
      label="付款时间">
    </el-table-column>
    <el-table-column
      prop="CreateTime"
      align="center"
      sortable
      :show-overflow-tooltip="true"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="StatusFormat"
      align="center"
      label="订单状态">
      <template slot-scope="scope">
        <span v-if="scope.row.Status=== 2" style="backgroundColor:#ff9800;color:#fff">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else-if="scope.row.Status=== 4" style="backgroundColor:#42b983;color:#fff">
          {{scope.row.StatusFormat}}
        </span>
        <span v-else style="backgroundColor:#fff">
          {{scope.row.StatusFormat}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="PriorityFormat"
      sortable
      align="center"
      label="订单优先级">
    </el-table-column>
  </el-table>
  <!-- 照片明细弹出框 -->
  <el-dialog title="照片明细" center :visible.sync="photoDialogLogVisible" :close-on-click-modal='false' width="600px">
    <div class="thumbs">
      <vue-preview :slides="slide1"></vue-preview>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {orderMessage,getOrderFileDOList} from '@/api/project'
  export default {
    props: {
      reset: {
        type: Array,
      },
    },
    data() {
      return {
        currentRow:{},
        slide1:[],
        photoDialogLogVisible:false,
      }
    },
    methods:{
      change(){

      },
      indexMethod(index){
        return (index+1)+(this.$parent.currentPage-1)*this.$parent.size
      },
      lookphoto(row){
        console.log(row);
        this.handleCurrentChange(row) ;
      },
       handleCurrentChange(row) {
        console.log(row);
        this.currentRow = row;
        //获取照片明细
        getOrderFileDOList({orderProductID:parseInt(this.currentRow.OrderProductId)}).then(res =>{
          if(parseInt(res.Code) === 1){
            // this.$message({
            //   type:'success',
            //   message:'请求照片明细成功'
            // })
          this.photoDialogLogVisible = true
          }
          res.Result.forEach(item => {
            item.src = item.CompressPath;
            item.msrc = item.CompressPath;
            item.alt = item.FileName
            item.title = item.FileName
            item.w = 700;
            item.h = 750;
          });
          this.slide1 = res.Result
          // console.log(this.slide1)
        })
        .catch(error => {
          console.log(error);
          Toast({
            message: "获取缩略图图片失败..."
          });
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
.thumbs {
  height: 400px;
  // background-color: #eee;
  overflow-x:hidden;
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    figure {
      width: 23%;
      margin: 5px;
      float:left;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
